<!--
  组件名称：污水处理厂实时监测仪表
 -->
<template>
  <!--这里是假数据-->
  <div class="aside-main">
    <el-row :gutter="20" style="line-height:30px;border-bottom: 1px solid #00d9e7;">
      <el-col :span="8" ><div class="real-time-title">{{data['STNM']}}</div></el-col>
      <el-col :span="8" style="padding:0px;"><div class="real-time monitoring">排水即时监控</div></el-col>
     <el-col :span="8" style="padding:0px;"> <div class="real-time monitoring">{{ (data['YMDHM']==''||typeof data['YMDHM']=='undefined')?new Date().format('yyyy-MM-dd hh:mm:ss'):new Date(data['YMDHM']).format('yyyy-MM-dd hh:mm:ss') }}&nbsp;&nbsp;&nbsp;<el-button type="text" @click="refresh()"
      :loading="loading" icon="el-icon-refresh"></el-button></div></el-col>
    </el-row>
      <el-row :gutter="20" style="line-height:70px;">
      <el-col :span="8"><div class="monitoring1">&nbsp;&nbsp;&nbsp;瞬时流量</div></el-col>
      <el-col :span="8"><div class="monitoring1">&nbsp;&nbsp;&nbsp;累计流量</div></el-col>
      <el-col :span="8"><div class="monitoring1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;流速</div></el-col>
    </el-row>
    <el-row :gutter="20" style="line-height:40px;">
      <el-col :span="8">
        <div class="circular">
          <el-tooltip class="item" effect="dark" :content="isEmpty(data['WT'])+'米'" placement="top">
            <span>{{cutOut(data['WT'])}}</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="circular">
          <el-tooltip class="item" effect="dark" :content="isEmpty(data['WN'])+'米'" placement="top">
            <span>{{cutOut(data['WN'])}}</span>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="circular">
          <el-tooltip class="item" effect="dark" :content="isEmpty(data['WS'])+'米'" placement="top">
            <span>{{cutOut(data['WS'])}}</span>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>
    <span style="color: white;float:right;    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 12px;" >(单位:米)</span>
  </div>
</template>
<script>
export default {
  name: 'RealTimeInstrument',
  data () {
    return {
      data: {},
      loading: false
    }
  },
  components: {},
  mounted () {
    this.getData()
  },
  watch: {
    row: function () {
      this.getData()
    }
  },
  computed: {
    isEmpty () {
      return (data) => {
        if (data === 0) {
          return 0
        }
        if (data) {
          return (data + '') !== 'null' ? data : '— —'
        } else {
          return '— —'
        }
      }
    },
    cutOut () {
      return data => {
        if (typeof data === 'undefined') {
          return '— —'
        }
        if ((data + '') === 'null') {
          return '— —'
        }
        let tepm = data + ''
        if (tepm.length > 9) {
          return tepm.slice(0, 7) + '...'
        }
        return tepm
      }
    }
  },
  methods: {
    getData (succeed) {
      this.loading = true
      let _this = this
      let stcd = ''
      if (this.row['STCD']) {
        stcd = this.row['STCD']
      } else {
        stcd = this.row['stcd']
      }
      this.$postJSON(
        this.src['detail'],
        // 'STCD=' + this.row['STCD']
        'STCD=' + stcd
      ).then(data => {
        _this.data = data[0] || {}
        this.loading = false
        if (succeed) {
          succeed()
        }
      })
    },
    refresh: function () {
      let _this = this
      this.getData(() => {
        _this.$message({
          message: '刷新成功！',
          type: 'success'
        })
      })
    }
  },
  props: [
    // 数据
    'row',
    // 数据源
    'src',
    // 附加数据
    'addition'
  ]
}
</script>
<style scoped>
.aside-main {
  background-color: #ffffff00;
  padding: 20px;
  width: 550px;
}

.aside-table .warning {
  color: red;
  font-weight: bold;
}

.real-time {
  color: #00d9e7;
  font-size: 14px;
}
.real-time-title {
  font-size: 18px;
  font-weight: bold;
  color: #00d9e7;
}
.monitoring1 {
  color: #fff;
  font-size: 14px;
  width: 100px;
}
.monitoring1-data {
  color: red;
  font-weight: bold;
  font-size: 14px;
  padding-left: 0px;
}
.circular {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 6px solid #00d8e7;
  color: #00d8e7;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  line-height: 110px;
}
</style>
